<script>
import IndexListItem from "@/components/IndexListItem.vue";
import Card from "@/components/Card.vue";
import httpInstance from "@/utils/http";
export default {
  components: {Card, IndexListItem},
  data() {
    return {
      statistics: {
        userCount: 0,        // 注册会员数量
        clubCount: 0,        // 活跃社团数量
        activityCount: 0,    // 本月活动数量
        achievementCount: 0  // 获奖荣誉数量
      },
      input: '',
      searchKeyword: '',
      pageSize: 5,
      currentPage: 1,
      hot_cubs: [],
      hot_keys_list: [
        "计算机协会",
        "象棋协会",
        "篮球协会",
        "电竞社",
        "学生会"
      ],
      cub_list: [],
      pics:[
        "http://localhost:8080/uploads/xueshenghui_club.png",
        "https://www.hbfu.edu.cn/plugins/websites/web/resources/images/q-2.jpg",
        "https://www.hbfu.edu.cn/plugins/websites/web/resources/images/q-4.jpg",
      ],
      activities: [],
      honorList: [],
      loading: false,
      userList: [],
      deptMap: {},
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      searchParams: {
        nickname: '',
        phone: '',
        role: ''
      },
      editDialogVisible: false,
      userForm: {
        id: '',
        nickname: '',
        phone: '',
        dept: '',
        role: 1,
        status: '1'
      },
      userRules: {
        nickname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        dept: [
          { required: true, message: '请选择学院', trigger: 'change' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      },
      submitting: false
    }
  },
  computed: {
    filteredClubList() {
      const filteredList = this.cub_list.filter(club => 
        club.title?.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
      
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      
      return filteredList.slice(startIndex, endIndex);
    },
    totalPages() {
      const filteredList = this.cub_list.filter(club => 
        club.title?.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
      return Math.ceil(filteredList.length / this.pageSize);
    }
  },
  methods:{
    // 获取各种数量的统计数据
    fetchStatistics() {
      // 获取用户数量
      httpInstance.get('/api/user/num')
        .then(res => {
          if (res.code === 200) {
            this.statistics.userCount = res.data || 0;
          }
        })
        .catch(err => {
          console.error('获取用户数量失败:', err);
        });
      
      // 获取社团数量
      httpInstance.get('/api/club/num')
        .then(res => {
          if (res.code === 200) {
            this.statistics.clubCount = res.data || 0;
          }
        })
        .catch(err => {
          console.error('获取社团数量失败:', err);
        });
      
      // 获取活动数量
      httpInstance.get('/api/activity/num')
        .then(res => {
          if (res.code === 200) {
            this.statistics.activityCount = res.data || 0;
          }
        })
        .catch(err => {
          console.error('获取活动数量失败:', err);
        });
      
      // 获取荣誉数量
      httpInstance.get('/api/achievement/num')
        .then(res => {
          if (res.code === 200) {
            this.statistics.achievementCount = res.data || 0;
          }
        })
        .catch(err => {
          console.error('获取荣誉数量失败:', err);
        });
    },
    // 查询社团荣誉
    getClubHonor(){
      httpInstance.post('api/achievement/list')
        .then(res => {
          // 成功的话，将列表中的前四个返回
          this.honorList = res.data.slice(0, 4)
        })
        .catch(err => {
          console.error('获取社团荣誉失败:', err);
        });
    },
    // 点击事件
    handleClick(){
      console.log("HelloWorld")
    },
    // 社团列表
    getClubList(){
      httpInstance.get('/api/club/list')
        .then(res => {
          console.log("社团列表",res)
          if(res.code === 200){
            // 映射返回的数据到表格所需的格式
            this.cub_list = res.data.map(club => ({
              id: club.id,
              title: club.title,
              members: club.memberCount || 0,
              createTime: this.formatDate(club.createTime),
              recruitStatus: club.recruit,  // 1: 招新中, 其他: 已截止
              rate: club.activityLevel || 0,
              pic: club.avatar || '/default-avatar.png'  // 使用avatar字段作为头像
            }));
          }
        })
        .catch(err => {
          console.error('获取社团列表失败:', err);
          this.$message.error('获取社团列表失败');
        });
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    handleSearch() {
      this.currentPage = 1;
      this.searchKeyword = this.input;
    },
    // 获取热门活动
    getHotActivities() {
      httpInstance.get('api/activity/hot')
        .then(res => {
          if (res.code === 200) {
            // 处理所有活动数据
            const allActivities = res.data.map(activity => ({
              id: activity.id,
              title: activity.title,
              description: activity.description,
              date: activity.date,
              location: activity.location,
              status: this.getActivityStatus(activity.date),
              image: activity.image || 'http://localhost:8080/uploads/default_activity.jpg'
            }));
            
            // 筛选出未结束的活动（进行中和即将开始的）
            const activeActivities = allActivities.filter(activity => 
              activity.status !== '已结束'
            );
            
            // 如果有足够的未结束活动，则显示这些活动
            // 否则，补充最新的已结束活动，确保总是显示4个活动
            if (activeActivities.length >= 4) {
              this.activities = activeActivities.slice(0, 4);
            } else {
              // 添加一些已结束的活动来补充不足4个的情况
              const endedActivities = allActivities.filter(activity => 
                activity.status === '已结束'
              );
              
              // 将未结束的活动和已结束的活动合并，并限制总数为4
              this.activities = [
                ...activeActivities,
                ...endedActivities
              ].slice(0, 4);
            }
          }
        })
        .catch(err => {
          console.error('获取热门活动失败:', err);
        });
    },
    // 根据日期计算活动状态
    getActivityStatus(activityDate) {
      const now = new Date();
      const actDate = new Date(activityDate);
      
      if (actDate < now) {
        return '已结束';
      } else if (actDate.toDateString() === now.toDateString()) {
        return '进行中';
      } else {
        return '即将开始';
      }
    },
    // 格式化时间
    formatDate(dateStr) {
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    },
    goToActivityDetail(id) {
      this.$router.push({
        name: 'ActivityDetail',
        params: { id: id }
      })
    },
    // 跳转到社团详情页
    goToClubDetail(id) {
      this.$router.push({
        name: 'myclub',
        params: { id: id }
      });
    },
    // 获取热门社团
    getHotClubs() {
      httpInstance.get('/api/club/hot')
        .then(res => {
          console.log("热门社团数据",res)
          if (res.code === 200) {
            const data = res.data;
            console.log("热门社团数据", data);
            
            // 判断data是否为字符串，如果是则尝试解析
            let clubData = data;
            if (typeof data === 'string') {
              try {
                // 尝试将字符串解析为JSON对象
                clubData = JSON.parse(data);
              } catch (e) {
                console.error('解析热门社团数据失败:', e);
              }
            }
            
            // 将社团数据整理成数组形式
            const clubsArray = [];
            
            // 检查数据结构并处理
            if (Array.isArray(clubData)) {
              // 直接处理数组
              clubData.forEach(item => {
                // 从数据中提取社团信息
                if (item && typeof item === 'object') {
                  const clubObj = {
                    id: item.id,
                    title: item.title,
                    placard: item.placard,
                    pic: item.avatar || 'http://localhost:8080/uploads/default_avatar.jpg',
                    description: item.description,
                    collectionNum: item.collectionNum ||  0,
                    tags: item.tags
                  };
                  clubsArray.push(clubObj);
                }
              });
            } else {
              // 处理可能是对象格式的数据
              for (const key in clubData) {
                if (clubData.hasOwnProperty(key) && typeof clubData[key] === 'object') {
                  const clubInfo = key.match(/Club\(id=(\d+), title=([^,]+)/);
                  if (clubInfo) {
                    // 从字符串中提取社团信息
                    const clubId = clubInfo[1];
                    const clubTitle = clubInfo[2];
                    
                    // 解析完整的社团信息
                    const fullClubInfo = key.match(/Club\((.*?)\)/);
                    if (fullClubInfo) {
                      const clubProps = fullClubInfo[1].split(', ');
                      const clubObj = { id: clubId, title: clubTitle };
                      
                      // 解析其他属性
                      clubProps.forEach(prop => {
                        const [propName, propValue] = prop.split('=');
                        if (propName && propValue !== undefined && propValue !== 'null') {
                          clubObj[propName] = propValue.replace(/^'|'$/g, ''); // 移除可能的引号
                        }
                      });
                      
                      // 确保必要字段存在
                      clubObj.collectionNum = clubData[key] || 0;
                      clubObj.placard = clubObj.placard || 'http://localhost:8080/uploads/default_avatar.jpg';
                      
                      clubsArray.push(clubObj);
                    }
                  }
                }
              }
            }
            
            // 按收藏数量降序排序
            clubsArray.sort((a, b) => b.collectionNum - a.collectionNum);
            
            // 取前5个作为热门社团展示
            this.hot_cubs = clubsArray.slice(0, 5);
          }
        })
        .catch(err => {
          console.error('获取热门社团失败:', err);
          // 保留一些默认数据，以防API调用失败
          this.hot_cubs = [
            {
              id: '1',
              title: '计算机协会',
              placard: 'http://localhost:8080/uploads/computer_club.png',
              collectionNum: 230
            },
            {
              id: '2',
              title: '象棋协会',
              placard: 'http://localhost:8080/uploads/chess_club.png',
              collectionNum: 180
            }
          ];
        });
    },
    // 获取部门列表
    async fetchDeptList() {
      try {
        const res = await httpInstance.get('/api/sys/dep');
        if (res.code === 200) {
          this.deptMap = res.data;
        } else {
          this.$message.error(res.msg || '获取学院列表失败');
        }
      } catch (error) {
        console.error('获取学院列表失败:', error);
        this.$message.error('获取学院列表失败');
      }
    },
    
    // 获取用户列表
    async fetchUserList() {
      this.loading = true;
      try {
        // 整合搜索参数和分页参数
        const params = {
          ...this.searchParams,
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize
        };
        
        // 移除空值
        Object.keys(params).forEach(key => {
          if (params[key] === '' || params[key] === null || params[key] === undefined) {
            delete params[key];
          }
        });
        
        // 调用搜索接口
        const res = await httpInstance.post('/api/user/search', params);
        
        if (res.code === 200) {
          this.userList = res.data.records || [];
          this.pagination.total = res.data.total || 0;
        } else {
          this.$message.error(res.msg || '获取用户列表失败');
        }
      } catch (error) {
        console.error('获取用户列表失败:', error);
        this.$message.error('获取用户列表失败');
      } finally {
        this.loading = false;
      }
    },
    
    // 格式化日期时间
    formatDateTime(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    
    // 获取学院名称
    getDeptName(deptId) {
      return this.deptMap[deptId] || '未知学院';
    },
    
    // 获取角色类型
    getRoleType(role) {
      const types = {
        1: '',        // 普通用户
        2: 'success', // 社联管理员
        3: 'danger'   // 超级管理员
      };
      return types[role] || '';
    },
    
    // 获取角色名称
    getRoleName(role) {
      const names = {
        1: '普通用户',
        2: '社联管理员',
        3: '超级管理员'
      };
      return names[role] || '未知角色';
    },
    
    // 处理搜索
    handleSearch() {
      this.pagination.currentPage = 1;
      this.fetchUserList();
    },
    
    // 处理页码大小变化
    handleSizeChange(newSize) {
      this.pagination.pageSize = newSize;
      this.fetchUserList();
    },
    
    // 处理页码变化
    handleCurrentChange(newPage) {
      this.pagination.currentPage = newPage;
      this.fetchUserList();
    },
    
    // 处理用户状态变更
    async handleStatusChange(row) {
      try {
        const newStatus = row.status === 1 ? 0 : 1;
        
        const res = await httpInstance.post(`/api/admin/users/${row.id}/status`, {
          status: newStatus
        });
        
        if (res.code === 200) {
          this.$message.success(`用户状态已${newStatus === 1 ? '启用' : '禁用'}`);
          row.status = newStatus;
        } else {
          this.$message.error(res.msg || '更新用户状态失败');
          // 回滚UI状态
          row.status = newStatus === 1 ? 0 : 1;
        }
      } catch (error) {
        console.error('更新用户状态失败:', error);
        this.$message.error('更新用户状态失败');
        // 回滚UI状态
        row.status = row.status === 1 ? 0 : 1;
      }
    },
    
    // 处理编辑用户
    handleEditUser(row) {
      this.userForm = {
        id: row.id,
        nickname: row.nickname,
        phone: row.phone,
        dept: row.dept,
        role: row.role,
        status: row.status.toString()
      };
      this.editDialogVisible = true;
      
      // 延迟重置表单，确保DOM更新后操作
      this.$nextTick(() => {
        this.$refs.userForm && this.$refs.userForm.clearValidate();
      });
    },
    
    // 提交用户表单
    submitUserForm() {
      this.$refs.userForm.validate(async (valid) => {
        if (!valid) return;
        
        this.submitting = true;
        try {
          const userData = { ...this.userForm };
          
          const res = await httpInstance.put(`/api/admin/users/${userData.id}`, userData);
          
          if (res.code === 200) {
            this.$message.success('用户更新成功');
            this.editDialogVisible = false;
            this.fetchUserList();
          } else {
            this.$message.error(res.msg || '更新用户失败');
          }
        } catch (error) {
          console.error('更新用户失败:', error);
          this.$message.error('更新用户失败');
        } finally {
          this.submitting = false;
        }
      });
    },
    
    // 处理删除用户
    async handleDeleteUser(row) {
      try {
        await this.$confirm(`确定要删除用户 ${row.nickname} 吗? 此操作不可恢复!`, '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        
        const res = await httpInstance.delete(`/api/admin/users/${row.id}`);
        
        if (res.code === 200) {
          this.$message.success('用户删除成功');
          this.fetchUserList();
        } else {
          this.$message.error(res.msg || '删除用户失败');
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除用户失败:', error);
          this.$message.error('删除用户失败');
        }
      }
    }
  },
  mounted() {
    // 获取统计数据
    this.fetchStatistics();
    
    // 获取社团荣誉
    this.getClubHonor();
    // 获取社团列表
    this.getClubList();
    // 获取热门活动
    this.getHotActivities();
    // 获取热门社团
    this.getHotClubs();
    // 获取部门列表
    this.fetchDeptList();
    // 获取用户列表
    this.fetchUserList();
  }
}

</script>

<template>
  <div>
  <div class="home_box">
      <!-- 顶部横幅 -->
      <div class="banner">
        <div class="banner-content">
          <h1>社联社团管理系统</h1>
          <p>打造优质社团文化，助力学生全面发展</p>
          <!-- <el-button type="primary" size="large" class="banner-button" @click="$router.push('/club/join')">加入社团</el-button> -->
        </div>
        <div class="banner-wave"></div>
      </div>

      <!-- 数据统计卡片 -->
      <div class="statistics">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <i class="el-icon-user"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.userCount }}</div>
                <div class="stat-label">注册会员</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <i class="el-icon-office-building"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.clubCount }}</div>
                <div class="stat-label">活跃社团</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <i class="el-icon-date"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.activityCount }}</div>
                <div class="stat-label">本月活动</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <i class="el-icon-trophy"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.achievementCount }}</div>
                <div class="stat-label">获奖荣誉</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 轮播图区域 -->
      <div class="carousel-section">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="(item, index) in pics" :key="index">
            <img :src="item" class="carousel-image">
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 热门社团 -->
      <div class="section hot-clubs">
        <div class="section-header">
          <h2>热门社团</h2>
          <!-- <el-button type="text">查看更多 ></el-button> -->
        </div>
        <el-row :gutter="30" type="flex" justify="center">
          <el-col :span="4" v-for="club in hot_cubs" :key="club.id" class="club-col">
            <div class="club-card">
              <div class="club-image">
                <img :src="club.placard" :alt="club.title">
                <div class="favorite-count">
                  <i class="el-icon-star-on"></i> {{ club.collectionNum || 0 }}
                </div>
              </div>
              <div class="club-info">
                <h3>{{ club.title }}</h3>
                <div class="club-tags" v-if="club.tags">
                  <el-tag v-for="tag in club.tags.split(',')" :key="tag" size="mini" type="info">{{ tag }}</el-tag>
                </div>
                <el-button type="primary" size="small" @click="goToClubDetail(club.id)">了解详情</el-button>
      </div>
    </div>
          </el-col>
        </el-row>
    </div>

      <!-- 社团列表 -->
      <div class="section club-list">
        <div class="section-header">
          <!-- <h2>社团列表</h2>
          <div class="search-area">
            <el-input 
              v-model="input" 
              placeholder="搜索社团..." 
              class="search-input"
              prefix-icon="el-icon-search"
              @keyup.enter.native="handleSearch">
            </el-input>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div> -->
      </div>

        <el-table
          :data="filteredClubList"
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa' }"
          border>
          <el-table-column prop="title" label="社团名称" >
            <template #default="scope">
              <div class="club-name">
                <el-avatar 
                  :size="40" 
                  :src="scope.row.pic"
                  :alt="scope.row.title"
                  @error="() => true">
                  <img src="/default-avatar.png"/>
                </el-avatar>
                <div class="club-title">
                  <span class="club-title-text">{{ scope.row.title }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="members" label="成员数量">
            <template #default="scope">
              <el-tag size="medium" type="info">{{ scope.row.members }}人</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column prop="createTime" label="成立时间"></el-table-column>
          <el-table-column prop="recruitStatus" label="状态">
            <template #default="scope">
              <div class="status-tag-container">
              <el-tag
                :type="scope.row.recruitStatus === 1 ? 'success' : 'danger'"
                  effect="dark">
                  {{ scope.row.recruitStatus === 1 ? '招新中' : '已停止招新' }}
              </el-tag>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="rate" label="评分">
            <template #default="scope">
              <el-rate
                v-model="scope.row.rate"
                disabled
                show-score
                text-color="#ff9900">
              </el-rate>
            </template>
          </el-table-column> -->
          <el-table-column label="操作">
            <template #default="scope">
              <div class="operation-buttons">
                <el-button type="primary" size="small" @click="goToClubDetail(scope.row.id)">查看详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalPages * pageSize"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>

      <!-- 最新活动 -->
      <div class="section latest-activities">
        <div class="section-header">
          <h2>热门活动</h2>
          <!-- <el-button type="text" @click="$router.push('/activities')">更多活动 <i class="el-icon-arrow-right"></i></el-button> -->
        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(activity, index) in activities" :key="index">
            <div class="activity-card" @click="goToActivityDetail(activity.id)">
              <div class="activity-image">
                <img :src="activity.image" :alt="activity.title">
                <div class="activity-status" 
                     :class="{
                       'ongoing': activity.status === '进行中',
                       'ended': activity.status === '已结束',
                       'upcoming': activity.status === '即将开始'
                     }">
                  {{ activity.status }}
                </div>
              </div>
              <div class="activity-content">
                <h3>{{ activity.title }}</h3>
                <p class="activity-desc">{{ activity.description }}</p>
                <div class="activity-footer">
                  <span><i class="el-icon-date"></i> {{ formatDate(activity.date) }}</span>
                  <span><i class="el-icon-location"></i> {{ activity.location }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 社团风采 -->
      <div class="section club-showcase">
        <div class="section-header">
          <h2>社团风采</h2>
        </div>
        <div class="showcase-grid">
          <div v-for="(item, index) in honorList" :key="index" class="showcase-item">
            <img :src="item.image" :alt="item.title">
            <div class="showcase-overlay">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加入社团引导 - 将其移出home_box容器 -->
    <div class="join-guide footer">
      <div class="join-content">
        <h2>加入我们</h2>
        <p>发现你的兴趣，遇见志同道合的伙伴</p>
        <div class="guide-steps">
          <div class="step">
            <i class="el-icon-search"></i>
            <h3>浏览社团</h3>
            <p>查看详细介绍，寻找心仪社团</p>
          </div>
          <div class="step">
            <i class="el-icon-edit"></i>
            <h3>提交申请</h3>
            <p>填写申请表，等待审核通过</p>
          </div>
          <div class="step">
            <i class="el-icon-user"></i>
            <h3>加入活动</h3>
            <p>参与精彩活动，结交新朋友</p>
          </div>
        </div>
        <!-- <el-button type="primary" size="large" class="join-button" @click="$router.push('/club/join')">立即加入</el-button> -->
      </div>
    </div>
  </div>
</template>

<style scoped>
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.home_box {
  min-height: 100vh;
  background-color: #f9fafb;
  padding-bottom: 0;
  overflow-x: hidden;
  width: 100%;
}

.banner {
  height: 500px;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 60px;
}

.banner-content {
  max-width: 800px;
  padding: 0 20px;
  z-index: 2;
  animation: fadeInUp 1s ease-out;
}

.banner-content h1 {
  font-size: 2.8em;
  margin-bottom: 20px;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.banner-content p {
  font-size: 1.3em;
  margin-bottom: 40px;
  opacity: 0.9;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.banner-button {
  padding: 12px 30px !important;
  font-size: 16px !important;
  border-radius: 30px !important;
  background: white !important;
  color: #4b6cb7 !important;
  border: none !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

.banner-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  background: #f5f7fa !important;
}

.banner-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0 C320,80 420,80 740,40 C1060,0 1360,80 1440,120 L1440,120 L0,120 Z" fill="white"/></svg>') no-repeat;
  background-size: cover;
}

.statistics {
  max-width: 1200px;
  margin: -100px auto 60px;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  height: 60px;
  width: 60px;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  box-shadow: 0 5px 15px rgba(75, 108, 183, 0.3);
}

.stat-icon i {
  font-size: 28px;
  color: white;
}

.stat-info .stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-info .stat-label {
  color: #777;
  font-size: 14px;
}

.section {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}

.section-header h2 {
  font-size: 28px;
  color: #333;
  margin: 0;
  font-weight: 600;
  display: inline-block;
}

.section-header h2:after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #4b6cb7, #182848);
  margin-top: 10px;
}

.carousel-section {
  max-width: 1200px;
  margin: 60px auto;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hot-clubs {
  margin: 80px auto;
}

.club-col {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.club-card {
  width: 100%;
  max-width: 200px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.club-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.club-image {
  height: 150px;
    overflow: hidden;
  position: relative;
}

.club-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.club-card:hover .club-image img {
  transform: scale(1.1);
}

/* 收藏数量样式 */
.favorite-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 3px 8px;
  border-radius: 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.favorite-count i {
  color: #ffeb3b;
  margin-right: 3px;
  font-size: 14px;
}

.club-info {
  padding: 20px 15px;
  text-align: center;
}

.club-info h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

/* 社团标签样式 */
.club-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-bottom: 12px;
}

.club-tags .el-tag {
  margin: 0;
  font-size: 10px;
}

.club-info .el-button {
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  border: none;
  transition: all 0.3s ease;
}

.club-info .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(75, 108, 183, 0.3);
}

.search-area {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.club-name {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.club-title {
  margin-left: 12px;
    display: flex;
  flex-direction: column;
}

.club-title-text {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.el-avatar {
  border: 1px solid #ebeef5;
  background-color: #fff;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .statistics .el-col {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .banner-content h1 {
    font-size: 2em;
  }
  
  .section {
    padding: 0 10px;
  }
}

.latest-activities {
  margin: 80px auto;
}

.activity-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  transition: all 0.3s ease;
  height: 100%;
    cursor: pointer;
  }

.activity-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.activity-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.activity-card:hover .activity-image img {
  transform: scale(1.1);
}

.activity-status {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 6px 15px;
  color: white;
  border-radius: 20px;
  font-size: 12px;
  z-index: 1;
  backdrop-filter: blur(5px);
}

.activity-status.ended {
  background: rgba(144, 147, 153, 0.8);
}

.activity-status.upcoming {
  background: rgba(75, 108, 183, 0.8);
}

.activity-status.ongoing {
  background: rgba(82, 196, 26, 0.8);
}

.activity-content {
  padding: 25px;
}

.activity-content h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.activity-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #777;
  font-size: 13px;
  gap: 15px;
  padding: 0;
  margin-top: 15px;
}

.activity-footer span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-footer i {
  margin-right: 5px;
  font-size: 14px;
  color: #4b6cb7;
}

.activity-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 0;
  min-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.section-header .el-button {
  color: #4b6cb7;
  font-size: 16px;
  transition: all 0.3s ease;
}

.section-header .el-button:hover {
  color: #182848;
}

.section-header .el-button i {
  margin-left: 3px;
  transition: all 0.3s ease;
}

.section-header .el-button:hover i {
  transform: translateX(3px);
}

.club-showcase {
  margin: 80px auto;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 30px;
}

.showcase-item {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.showcase-overlay {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6), transparent);
  color: white;
  padding: 25px;
  transition: all 0.3s ease;
}

.showcase-item:hover .showcase-overlay {
  bottom: 0;
}

.showcase-item:hover img {
  transform: scale(1.1);
}

.showcase-overlay h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 600;
}

.showcase-overlay p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.club-list {
  margin: 80px auto;
}

.join-guide {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: white;
  padding: 80px 0;
  margin-top: 80px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

.join-guide:before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.join-guide:after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.join-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.join-content h2 {
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 600;
}

.join-content > p {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.guide-steps {
  display: flex;
  justify-content: space-around;
  margin: 50px 0;
}

.step {
  flex: 1;
  max-width: 280px;
  text-align: center;
  padding: 0 20px;
  transition: all 0.3s ease;
}

.step:hover {
  transform: translateY(-10px);
}

.step i {
  font-size: 40px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.1);
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s ease;
}

.step:hover i {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.step h3 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 600;
}

.step p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.6;
}

.operation-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.status-tag-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.el-button--primary {
  background-color: #4b6cb7;
  border-color: #4b6cb7;
}

.el-button--primary:hover, .el-button--primary:focus {
  background: #3a5aa0;
  border-color: #3a5aa0;
}

.el-button--success {
  background-color: #67c23a;
  border-color: #67c23a;
}

.el-button--success:hover, .el-button--success:focus {
  background: #5daf34;
  border-color: #5daf34;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.join-button {
  padding: 12px 30px !important;
  font-size: 16px !important;
  border-radius: 30px !important;
  background: white !important;
  color: #4b6cb7 !important;
  border: none !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  margin-top: 20px;
}

.join-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.footer {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.activity-image-uploader,
.achievement-image-uploader {
  border: 2px dashed #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  height: 225px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-image-uploader i,
.achievement-image-uploader i {
  font-size: 32px;
  color: #c0c4cc;
  line-height: 1;
}
</style>
